<template>
    <div :class="['input-item',{'is-textarea':isTextarea}]">
        <div class="input-item-label" :style="{'flex':`0 0 ${labelWidth}px`,'width':`${labelWidth}px`}">
            {{label}}
        </div>
        <div class="input-item-input">
            <slot></slot>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .input-item{
        display: flex;
        align-items: center;
        min-height:34px;
        margin-bottom: 10px;
        &-label{
            flex:0 0 80px;
            width:80px;
            padding-right: 5px;
        }
        &-input{
            flex:1;
        }
        &.is-textarea{
            .input-item-label{
                align-self: flex-start;
                margin-top: 8px;
            }
        }
    }
</style>
<script>
    export default{
        name:'hx-input-item',
        props:{
            label:{
                type:String,
                default:''
            },
            labelWidth:{
                type:[String,Number],
                default:80
            },
            hasText:{
                type:Boolean,
                default:false
            },
            isTextarea:{
                type:Boolean,
                default:false
            }
        }
    }
</script>
